@extends('admin.base')

@section('content')
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline" style="margin-right: 0px;">
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <input type="text" class="layui-input" placeholder="开始时间" name="start_time" id="start_time" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-form-mid layui-word-aux" style="display: inline;margin-right: 5px">-</div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="结束时间" name="end_time" id="end_time" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="order_no" id="order_no" placeholder="请输入订单编号" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="status" lay-verify="required" id="status">
                            <option value="">请选择状态</option>
                            @foreach($status as $k => $v)
                                <option value="{{$k}}">{{$v}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn" id="searchBtn">搜 索</button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>

            <script type="text/html" id="options">
                <div class="layui-btn-group"></div>
            </script>

            <script type="text/html" id="route">
                @{{ d.route.src_address }} >> @{{ d.route.dst_address }}
            </script>
            <script type="text/html" id="sender">
                @{{ d.sender ? (d.sender.name ? d.sender.name : d.sender.phone) : ''}}
            </script>
            <script type="text/html" id="receiver">
                @{{ d.receiver ? (d.receiver.name ? d.receiver.name : d.receiver.phone) : ''}}
            </script>
            <script type="text/html" id="loss">
                <input disabled type="checkbox" lay-skin="switch" lay-text="损耗扣款|损耗不扣款" @{{
                       d.loss_deduct==1?'checked':'' }}>
            </script>
        </div>
    </div>
@endsection

@section('script')
    @can('freight.order')
        <script>
            layui.use(['layer', 'table', 'form', 'laydate'], function () {
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                var laydate = layui.laydate;
                //用户表格初始化
                var dataTable = table.render({
                    elem: '#dataTable'
                    , height: 500
                    , url: "{{ route('admin.order.data') }}" //数据接口
                    , page: true //开启分页
                    , cols: [[ //表头
                        {checkbox: true, fixed: true}
                        , {field: 'order_no', title: '订单编号', width: 160, fixed: 'left'}
                        , {field: 'id', title: 'ID', sort: true, width: 60}
                        , {
                            field: 'status', title: '运单状态', width: 100, templet: function (d) {
                                if (d.status == 10) {
                                    return '已发布';
                                } else if (d.status == 20) {
                                    return '已完成';
                                } else {
                                    return '已取消';
                                }
                            }
                        }
                        , {field: 'route', title: '路线', toolbar: '#route', width: 300}
                        , {field: 'cargo_type', title: '类型', width: 100}
                        , {field: 'price', title: '单价',  width: 150}
                        , {field: 'loss_deduct', title: '是否扣款', toolbar: '#loss', width: 130}
                        , {field: 'owner_uuid', title: '货主ID', width: 200}
                        , {field: 'sender_uuid', title: '发货人', toolbar: '#sender', width: 100}
                        , {field: 'receiver_uuid', title: '收货人', toolbar: '#receiver', width: 100}
                        , {field: 'total_car_num', title: '需要车辆数量', width: 120}
                        , {field: 'shipping_car_num', title: '报名车辆数量', width: 120}
                        , {field: 'start_time', title: '运单开始时间', width: 180}
                        , {field: 'end_time', title: '运单结束时间', width: 180}
                        , {field: 'created_at', title: '创建时间', width: 180}
                        , {field: 'updated_at', title: '更新时间', width: 180}
//                        , {fixed: 'right', align: 'center', toolbar: '#options', width: 100}
                    ]]
                });

                //监听工具条
                table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                    var data = obj.data //获得当前行数据
                        , layEvent = obj.event; //获得 lay-event 对应的值
                    if (layEvent === 'info') {
                        location.href = '/admin/order/' + data.id + '/show';
                    }
                });

                //搜索
                laydate.render({
                    elem: "#start_time",
                    trigger: 'click',
                });
                laydate.render({
                    elem: "#end_time",
                    trigger: 'click',
                });
                $("#searchBtn").click(function () {
                    var start_time = $("#start_time").val();
                    var end_time = $("#end_time").val();
                    var order_no = $("#order_no").val();
                    var status = $("#status").val();
                    dataTable.reload({
                        where: {start_time: start_time, end_time: end_time, order_no: order_no, status:status},
                        page: {curr: 1}
                    })
                })
            })
        </script>
    @endcan
@endsection